<div id='ConsolePanel' class="OneContainer">
	<div class="row">
		<div class="col-md-3">
			<div class="Panel PanelBlack">
				<div class="PanelTitle">服务端信息</div>
				<div class="PanelBody">

					<div class="PanelItem">
						<span class="glyphicon glyphicon-th-large" aria-hidden="true"> </span> 名称: {{ serverData.name }}
					</div>
					<div class="PanelItem">
						<span class="glyphicon glyphicon-tasks" aria-hidden="true"> </span> CPU 使用率: {{ sysCpu }} %
					</div>
					<div class="PanelItem">
						<span class="glyphicon glyphicon-equalizer" aria-hidden="true"> </span> 内存 使用率: {{ (100 - sysMonery).toFixed(1)
						}} %
					</div>
					<div class="PanelItem" v-if="run">
						<span class="glyphicon glyphicon-ok" aria-hidden="true"> </span>
						<span style="color: #23970c;"> 状态: 正在运行..</span>
					</div>
					<div class="PanelItem" v-else>
						<span class="glyphicon glyphicon-remove" aria-hidden="true"> </span> 状态: 未运行
					</div>

				</div>
			</div>
			<div class="Panel" :class="run==true?'PanelGreen':'PanelYellow'">
				<div class="PanelTitle">服务端操作</div>
				<div class="PanelBody">
					<div class="PanelItem" v-on:click="toTerminal()">
						<span class="glyphicon glyphicon-unchecked" aria-hidden="true"> </span> 模拟型终端
					</div>
					<transition name="slide-fade">
						<div class="PanelItem" v-on:click="toOpenServer()" v-show="!run">
							<span class="glyphicon glyphicon-play" aria-hidden="true"> </span> 开启服务器
						</div>
					</transition>
					<transition name="slide-fade">
						<div class="PanelItem" v-on:click="toCommand('__stop__')" v-show="run">
							<span class="glyphicon glyphicon-pause" aria-hidden="true"> </span> 关闭服务器
						</div>
					</transition>
					<div class="PanelItem" v-on:click="toCommand('__restart__')" v-show="run">
						<span class="glyphicon glyphicon-refresh" aria-hidden="true"> </span> 重启服务器
					</div>
					<div class="PanelItem" v-on:click="toCommand('__killserver__')" v-show="run">
						<span class="glyphicon glyphicon-remove" aria-hidden="true"> </span> 强制性结束进程
					</div>
				</div>
			</div>
			<div class="Panel " :class="serverData.autoRestart?'PanelGreen':'PanelGray'">
				<div class="PanelTitle">崩溃监视与配置</div>
				<div class="PanelBody">
					<div class="PanelItem" v-on:click="toProperties()">
						<span class="glyphicon glyphicon-cog" aria-hidden="true"> </span> Server.properties 配置文件
					</div>
					<transition name="slide-fade">
						<div class="PanelItem" v-on:click="toAutoRestart(false)" v-show="serverData.autoRestart">
							<span class="glyphicon glyphicon-retweet" aria-hidden="true"> </span> 崩溃重启:
							<span style="color: #29b90c;">打开</span>
						</div>
					</transition>
					<transition name="slide-fade">
						<div class="PanelItem" v-on:click="toAutoRestart(true)" v-show="!serverData.autoRestart">
							<span class="glyphicon glyphicon-retweet" aria-hidden="true"> </span> 崩溃重启:
							<span style="color: #818181;">关闭</span>
						</div>
					</transition>
				</div>
			</div>
			<div class="Panel PanelGray" v-if="isFtpOpen">
				<div class="PanelTitle">FTP 链接信息</div>
				<div class="PanelBody">
					<div class="PanelItem">
						<span class="glyphicon glyphicon-user" aria-hidden="true"> </span> 账号: {{ MCSERVER.username + "." +
						serverData.name }}
					</div>

					<div class="PanelItem">
						<span class="glyphicon glyphicon-th-list" aria-hidden="true"> </span> 端口: {{ FTP_port }}
					</div>
					<div class="PanelItem">
						<span class="glyphicon glyphicon-lock" aria-hidden="true"></span> 密码:
						<span style="color: #666666;">&lt;与登陆密码相同&gt;</span>
					</div>
					<div class="PanelItem">
						<span class="glyphicon glyphicon-send" aria-hidden="true"></span> 模式:
						<span style="color: #666666;">&lt;被动传输模式&gt;</span>
					</div>
				</div>
			</div>
			<div class="Panel PanelGray">
				<div class="PanelTitle">普通外置接口</div>
				<div class="PanelBody">
					<div class="PanelItem">
						<span class="glyphicon glyphicon-barcode" aria-hidden="true"> </span>
						<span v-on:click="toAPI_JSON()">格式 JSON | API 接口</span>
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-9">
			<div class="Panel PanelBlack">
				<div class="PanelTitle">服务端控制组</div>
				<div class="PanelBody">
					<div class="row">
						<div class="col-md-3 col-sm-6"
							v-on:click="RES.redirectPage('./template/component/terminal.html', null, '')">
							<div class="PanelItemBlock">
								<div class="LogV">
									<span class="glyphicon glyphicon-console" aria-hidden="true"> </span>
								</div>
								<div class="LogK">命令控制台</div>
							</div>
						</div>
						<div class="col-md-3 col-sm-6" v-on:click="toOnlineFs()">
							<div class="PanelItemBlock">
								<div class="LogV">
									<span class="glyphicon glyphicon-th-list" aria-hidden="true"> </span>
								</div>
								<div class="LogK">文件在线管理</div>
							</div>
						</div>
						<div class="col-md-3 col-sm-6" v-on:click="toSchedule()">
							<div class="PanelItemBlock">
								<div class="LogV">
									<span class="glyphicon glyphicon-indent-right" aria-hidden="true"> </span>
								</div>
								<div class="LogK">计划任务项目</div>
							</div>
						</div>
						<div class="col-md-3 col-sm-6" v-on:click="toPingMCProtocol()">
							<div class="PanelItemBlock">
								<div class="LogV" style="font-size: 18px;">
									<!-- <span class="glyphicon glyphicon-cog" aria-hidden="true"> </span> -->
									<strong>
										<span>
											<span style="color: rgb(38, 165, 26);"
												v-text="mcping.current_players"></span>
											<span style="color: rgb(0, 0, 0);">/</span>
											<span style="color: rgb(38, 165, 26);" v-text="mcping.max_players"></span>
										</span>
									</strong>
								</div>
								<div class="LogK">
									<span>状态监控协议</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-9" id='ChartCPUFor'>
			<div class="Panel ">
				<div class="PanelTitle">中央处理器 使用率 （%）</div>
				<div class="PanelBody">
					<div class="row">
						<div id="ChartCPU" style="height:280px;width:100%;"></div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-3"></div>
		<div class="col-md-9">
			<div class="Panel ">
				<div class="PanelTitle">物理内存 使用率 （%）</div>
				<div class="PanelBody">
					<div class="row">
						<div id="ChartRAM" style="height:280px;width:100%;"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<script>
	MI.rListener('onload', function () {
		// 定义页面地址
		TOOLS.definePage('template/component/console', 'server/console', MCSERVER.listenServername);


		var serverName = MCSERVER.listenServername;


		VIEW_MODEL.newVue('ConsolePanel', {
			el: '#ConsolePanel',
			methods: {
				toAutoRestart: function () {
					WS.sendMsg('server/console/autorestart', serverName);
				},
				toOnlineFs: function () {
					var path = MCSERVER.URL("fs_auth/auth/" + encodeURIComponent(serverName));
					window.open(path);
				},
				toOpenServer: function () {
					this.allowedStart = !this.allowedStart;
					WS.sendMsg('server/console/open', serverName);
				},
				toCommand: function (parCommand) {
					if (parCommand && typeof (parCommand) == 'string') this.command = parCommand;
					var data = {
						command: this.command,
						serverName: serverName
					};
					if (this.command.length >= 1 || typeof (parCommand) == 'string') {
						WS.sendMsg('server/console/command', JSON.stringify(data));
					}
					this.command = '';
				},
				toProperties: function () {
					RES.redirectPage('./template/component/properties.html', 'server/properties', serverName);
				},
				toTerminal: function () {
					RES.redirectPage('./template/component/terminal.html', 'server/console', serverName);
				},
				toSchedule: function () {
					RES.redirectPage('./template/component/schedule.html', 'schedule/list', serverName);
				},
				toAPI_JSON: function () {
					window.open("/api/status/" + serverName);
				},
				toAPI_PAGE: function () {
					window.open("/api/status/" + serverName);
				},
				toPingMCProtocol: function () {
					PAGE.listenServername = MCSERVER.listenServername;
					TOOLS.popWind({
						style: {
							maxWidth: "500px",
							top: "15%"
						},
						title: "监控协议配置",
						template: "template/dialog/pingmc_config.html"
					});
				},
				toTerminal: function () {
					// 打开弹窗型终端
					TOOLS.listenTerminal(serverName);
				}
			},
			data: {
				command: "",
				allowedStart: true,
				runStatusClass: '',
				username: MCSERVER.listenServername
			},
			watch: {
				run: function (cur, old) { }
			}
		});

		// 服务器状态请求
		PAGE.timerR = setInterval(function () {
			WS.sendMsg('server/console', MCSERVER.listenServername);
		}, 3000);

		//CPU
		var CPUoption = TOOLS.charts.DefOption;
		var RAMoption = TOOLS.charts.DefOption;

		//表格
		var ChartCPU = null;
		var ChartRAM = null;
		PAGE.ChartLogIs = true;
		TOOLS.charts.bulider('ChartCPU', 24, {}, function (chart) {
			ChartCPU = chart;

			function doing() {
				chart.replaceData(VIEW_MODEL['ConsolePanel'].CPUlog);
				//chart.pushData(getNowFormatDate(), GetRandomNum(1, 40));
				chart.reOption();
				if (PAGE.ChartLogIs) setTimeout(doing, 4000);
			}
			doing();
		}, CPUoption);
		//ChartRAM
		TOOLS.charts.bulider('ChartRAM', 24, {}, function (chart) {
			ChartRAM = chart;

			function doing() {
				chart.replaceData(VIEW_MODEL['ConsolePanel'].RAMlog);
				//chart.pushData(getNowFormatDate(), GetRandomNum(1, 40));
				chart.reOption();
				if (PAGE.ChartLogIs) setTimeout(doing, 4000);
			}
			doing();
		}, CPUoption);

		PAGE.chartResizeFunc = function () {
			ChartCPU.chart.resize();
			ChartRAM.chart.resize();
		}

		MI.listener('colmchangeEnd', PAGE.chartResizeFunc);
		MI.listener('resize', PAGE.chartResizeFunc);

	});

	MI.rListener('onend', function () {
		clearInterval(PAGE.timerR);
		MI.onDestroy('colmchangeEnd', PAGE.chartResizeFunc);
		MI.onDestroy('resize', PAGE.chartResizeFunc);
		PAGE.ChartLogIs = false;
	});
</script>